<template>
  <div class="login">
    <el-row>
      <el-col :span="8" :offset="8">
        <div class="login_div">
          <p>小U商城后台管理系统</p>
          <!-- model：表单项的数据 -->
          <!-- rules:表单项的检验规则 -->
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item prop="username">
              <el-input placeholder="请输入用户名" v-model="ruleForm.username">
                <template slot="prepend"><i class="el-icon-user"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input placeholder="请输入密码" v-model="ruleForm.password">
                <template slot="prepend"><i class="el-icon-lock"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="warning" class="btn1" @click="submitForm"
                >立即创建</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        username: "admin",
        password: "admin888",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 提交表单
    submitForm() {
      // this.$refs.ruleForm  选择表单，目的是为了校验表单
      // validate  element自带的方法，用来校验
      this.$refs.ruleForm.validate((valid) => {
        // valid为真时表示校验否过
        if (valid) {
          // 校验成功。可以登录了
          this.goLogin();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 真的登录了
    goLogin() {
      this.$http.post('/userlogin', {
        username: this.ruleForm.username,
        password: this.ruleForm.password
      })
        .then(res => {
          // 通过store保存用户信息
          this.$store.commit('saveInfo', res.list)
          // if(res) {
          //   this.$router.push('/index');
          // }
        })
        .catch(err => {
          console.log(err);
        })
    }
  },
};
</script>

<style>
.login {
  width: 100vw;
  height: 100vh;
  background-color: #56a5f1;
}
.login_div {
  height: 200px;
  background-color: #fff;
}
/* 覆盖element的样式 */
.login .el-button.btn1 {
  width: 200px;
}
</style>